<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
        <title>Combine Tiled and Dyna Service</title>
        <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAjU0EJWnWPMv7oQ-jjS7dYxQGj0PqsCtxKvarsoS-iqLdqZSKfxRdmoPmGl7Y9335WLC36wIGYa6o5Q" type="text/javascript">
        </script>
        <script type="text/javascript">
         document.write('<script type="text/javascript" src="../src/arcgislink'+(document.location.search.indexOf('packed')>-1?'_packed':'')+'.js"><'+'/script>');
        </script>
        <script type="text/javascript">
            
        function init(){
          // first init a normal map
          var map = new GMap2(document.getElementById("map"));
          map.setCenter(new GLatLng(45.5, -122.7), 15);
          map.addControl(new GMapTypeControl());
          map.addControl(new GLargeMapControl());
          map.addControl(new GScaleControl());
          map.enableDoubleClickZoom();
          map.enableContinuousZoom();
          map.enableScrollWheelZoom();
          
          // now add ArcGIS maps
          var baseUrl = 'http://sampleserver1.arcgisonline.com/ArcGIS/rest/services';
          var wgs84Url = baseUrl + '/Portland/Portland_ESRI_LandBase_AGO/MapServer';
          var webMercatorUrl = baseUrl + '/Portland/ESRI_LandBase_WebMercator/MapServer';
          var dynaUrl = baseUrl + '/Demographics/ESRI_Census_USA/MapServer';
          var agoUrl='http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer';
          
          var wgs84 = new ArcGISMapType(wgs84Url);
          GEvent.addListener(wgs84,'load',function(s){
            map.addMapType(wgs84);
          });
          var webMercator = new ArcGISMapType(webMercatorUrl);
          GEvent.addListener(webMercator,'load',function(s){
            map.addMapType(webMercator);
          });
          var ago = new ArcGISMapType([new ArcGISTileLayer(agoUrl,{name:'AGO'})]);
          GEvent.addListener(ago,'load',function(){
            map.addMapType(ago);
          });
          var dynaOverlay = new ArcGISMapOverlay(dynaUrl);
          // no load event is needed
          map.addOverlay(dynaOverlay);
          GEvent.addDomListener(document.getElementById('show'), 'click', function(){
              dynaOverlay.show();
          });
          GEvent.addDomListener(document.getElementById('hide'), 'click', function(){
              dynaOverlay.hide();
          });
          
        }
        </script>
    </head>
    <body onload="init()">
       <a href='../docs/examples.html'>More examples</a> | Use
       <a href='?packed'>Packed </a> | 
       <a href='?'> Unpacked</a> Version of the script.
       <br/>
       <p style="width:700px"> In many situations, tiled maps are best used as background map and
        dynamic maps are added on top. 
The following example loaded the default Google map types (Normal, Satellite, Hybrid), 
then a cached map service built on WGS84(4326) spatial reference system, 
then a cached map type built on Web-Mercator(102113) spatial reference system, 
and finally a dynamic map whose own spatial reference system was NAD83 GCS(4269)
on top of all. As map type changes,
 the dynamic map will refresh itself to match the underline spatial reference.</p>
       <button id='show'>Show Dyna</button><button id='hide'>Hide Dyna</button>
        <div id="map" style="width:700px; height:400px; border:1px solid #000;">
        </div>
    </body>
</html>
